/**
*
* @author zzhijie
* @date 2020-12-23
*/

<template>
  <div
    class="thumb-item"
    :class="usedNum>=params.limit?'disabled':''"
    :draggable="usedNum<params.limit"
    @dragstart="handleDragstart"
    @dragend="handleDragend"
  >
    <slot :usedNum="usedNum"></slot>
  </div>
</template>

<script>
export default {
  name: "thumbItem",
  props: {
    mainComponent: {
      type: Object,
      required: true
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {}
  },
  computed: {
    usedNum() {
      let num = 0;
      this.mainComponent.previewList.forEach(item => {
        if (item.type === this.params.type) {
          num++;
        }
      });
      return num;
    }
  },
  methods: {
    handleDragend(e) {
      // console.log(e)
    },
    handleDragstart(e) {
      this.mainComponent.dragComponentName = this.params.type;
    },
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.thumb-item {
  cursor: move;
  user-select: none;
  color: #666;

  &.disabled {
    cursor: not-allowed;

    &:hover {
      background: #fff;
      color: #666;
    }
  }

  &:hover {
    background: $primary;
    color: #fff;
  }
}
</style>
